date: 2023-09-01
Type: Cours
Projet: Blindcode
Cours: CSSCSS : Les liens
Les liens hypertextes (ou simplement les liens) sont essentiels pour la navigation web, et en utilisant CSS, vous pouvez personnaliser leur apparence pour les rendre attrayants et informatifs.
Les liens hypertextes peuvent être stylisés en CSS en utilisant différentes propriétés pour définir leur couleur, leur texte décoratif, leur comportement au survol, etc. Voici quelques-unes des propriétés CSS couramment utilisées pour styliser les liens :
color)Comme pour les textes, la propriété color définit la couleur du texte du lien lorsque le lien est dans son état normal. Vous pouvez spécifier une couleur par nom (comme "blue" ou "red") ou en utilisant des codes hexadécimaux ou RGB.
Exemple :
a {
color: blue; /* Définit la couleur du texte du lien en bleu */
}
text-decoration)La propriété text-decoration permet de contrôler les décorations du texte, telles que les soulignements, les lignes en surbrillance, etc. Vous pouvez utiliser cette propriété pour supprimer les soulignements par défaut des liens.
Exemple :
a {
text-decoration: none; /* Supprime le soulignement des liens */
}
:hover)Le pseudo-élément :hover permet de spécifier le style des liens lorsqu'ils sont survolés par la souris. Cela peut inclure un changement de couleur, un soulignement ou toute autre propriété de style.
Exemple :
a:hover {
color: red; /* Change la couleur du texte du lien en rouge au survol */
}
:active)Le pseudo-élément :active définit le style des liens lorsqu'ils sont activés, généralement lors du clic de l'utilisateur. Vous pouvez également personnaliser le style de cet état.
Exemple :
a:active {
background-color: yellow; /* Change la couleur de fond du lien en jaune lorsqu'il est cliqué */
}
:visited)Le pseudo-élément :visited permet de spécifier le style des liens déjà visités par l'utilisateur. Cela peut être utile pour différencier les liens visités des liens non visités.
Exemple :
a:visited {
color: purple; /* Définit la couleur du texte du lien en violet pour les liens visités */
}
En plus de styliser tous les liens de la même manière, vous pouvez utiliser des classes ou des ID pour cibler des liens spécifiques ou des groupes de liens. Cela vous permet d'appliquer des styles différents à des liens particuliers sur une même page.
Exemple avec une classe :
<a href="#" class="special-link">Lien Spécial</a>
.special-link {
color: green; /* Applique un style spécial au lien avec la classe "special-link" */
}
Exemple avec un ID :
<a href="#" id="important-link">Lien Important</a>
#important-link {
font-weight: bold; /* Applique un style gras au lien avec l'ID "important-link" */
}
Cette méthode marche pour tout ce que nous voyons au cours, et n'est pas spécifique aux liens, mais il me semble que c'est le bon moment pour vous en parler.
Outre les pseudo-classes :hover, :active, et :visited, il existe d'autres pseudo-classes CSS que vous pouvez utiliser pour cibler des états spécifiques des liens, tels que :focus pour les liens actuellement en focus ou :not() pour exclure certains liens de la stylisation. Nous verrons tout ça en détail un peu plus loin.
créé le 2023-09-01 à 11:19